@if (collapsible) {
    <ion-accordion class="core-course-module-list-wrapper" [id]="section.id"
        [attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null" [value]="section.id" toggleIconSlot="start">
        <ng-container *ngTemplateOutlet="sectionHeader" />

        <div slot="content">
            <ng-container *ngIf="section.expanded">
                <ng-container *ngTemplateOutlet="sectionContent" />
            </ng-container>
        </div>
    </ion-accordion>
} @else {
    <div class="core-course-module-list-wrapper" [id]="section.id"
        [attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null">
        <ng-container *ngTemplateOutlet="sectionHeader" />
        <ng-container *ngTemplateOutlet="sectionContent" />
    </div>
}

<ng-template #sectionHeader>
    <ion-item class="course-section divider" [class.item-dimmed]="section.visible === 0 || section.uservisible === false" slot="header">
        <ion-label class="ion-text-wrap">
            <h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
                <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id" />
                <ion-icon *ngIf="section.availabilityinfo" name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
            </h2>
            <div *ngIf="section.visible === 0 && section.uservisible !== false">
                <ion-badge color="secondary" class="ion-text-wrap">
                    <ion-icon name="far-eye-slash" aria-hidden="true" />
                    {{ 'core.course.hiddenfromstudents' | translate }}
                </ion-badge>
            </div>
            <div *ngIf="section.visible === 0 && section.uservisible === false">
                <ion-badge color="warning">
                    {{ 'core.notavailable' | translate }}
                </ion-badge>
            </div>
        </ion-label>
        <ion-badge *ngIf="section.highlighted && highlightedName" slot="end">{{highlightedName}}</ion-badge>
    </ion-item>
</ng-template>

<ng-template #sectionContent>
    <ion-item class="ion-text-wrap section-summary" *ngIf="section.availabilityinfo">
        <ion-label>
            <ion-chip>
                <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
                <ion-label>
                    <core-format-text [text]="section.availabilityinfo" contextLevel="course" [contextInstanceId]="course.id" />
                </ion-label>
            </ion-chip>
        </ion-label>
    </ion-item>
    <ion-item class="ion-text-wrap section-summary" *ngIf="section.summary">
        <ion-label>
            <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id" />
        </ion-label>
    </ion-item>

    <ng-container *ngFor="let modOrSubsection of section.contents">
        @if (!isModule(modOrSubsection)) {
            <core-course-section [course]="course" [section]="modOrSubsection" [lastModuleViewed]="lastModuleViewed"
                [viewedModules]="viewedModules" [collapsible]="true" />
        } @else {
            <core-course-module *ngIf="modOrSubsection.visibleoncoursepage !== 0" [module]="modOrSubsection" [section]="section"
                [showActivityDates]="course.showactivitydates" [showCompletionConditions]="course.showcompletionconditions"
                [isLastViewed]="lastModuleViewed && lastModuleViewed.cmId === modOrSubsection.id" [class.core-course-module-not-viewed]="
                    !viewedModules[modOrSubsection.id] &&
                    (!modOrSubsection.completiondata || modOrSubsection.completiondata.state === completionStatusIncomplete)" />
        }
    </ng-container>
</ng-template>
